<template>
  <div class="bigBox">
    <SearchTop class="top" :searchShow='searchShow'></SearchTop>
    <div class="hotsearch hotsearch1">
      <div class="titleBox" v-if="historyArr.length > 0">
        <div class="hotTitle">
          <i class="iconfont icon-shizhong"></i>历史搜索
        </div>
        <div class="hotTitle" @click="delHistory">
          <i class="iconfont icon-shanchu"></i>删除历史搜索
        </div>
      </div>

      <div class="keyword">
        <div
          v-for="(item, index) in historyArr"
          :key="index"
          class="keywordText"
          @click="goSearch(item)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    <div class="hotsearch">
      <div class="hotTitle"><i class="iconfont icon-huo"></i>热门搜索</div>
      <div class="keyword">
        <div
          v-for="(item, index) in keyWordList"
          :key="index"
          class="keywordText"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
    <GoodsList :goodsList="goodsList"></GoodsList>
  </div>
</template>

<script>
import { Dialog } from "vant";
import "vant/es/dialog/style";
import SearchTop from "@/components/search/searchTop";
import GoodsList from "@/components/search/goodsList";
import http from "@/common/api/request";
export default {
  components: {
    
    SearchTop,
    GoodsList,
    [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      searchShow:true,
      goodsList: [],
      keyWord: "",
      historyArr: [],
      keyWordList: [
        { title: "易冲泡茶叶" },
        { title: "经典紫砂壶" },
        { title: "送礼" },
        { title: "旅行茶具" },
        { title: "待客茶" },
        { title: "新手入门茶" },
        { title: "大石壶" },
        { title: "福鼎白茶" },
        { title: "绿茶" },
      ],
    };
  },
  methods: {
    goSearch(item) {
      this.$router.push({
        name: "searchList",
        query: { keyWord: item },
      });
    },
    delHistory() {
      Dialog.confirm({
        title: "标题",
        message: "是否要删除历史记录",
      })
        .then(() => {
          // on confirm
          localStorage.setItem("search", "[]");
          this.historyArr = [];
        })
        .catch(() => {
          // on cancel
        });
    },
    goBack() {
      this.$router.go(-1);
    },
    // 请求推荐商品数据

    getdata() {
      http
        .$axios({
          url: `/api/goods/recommend`,
        })
        .then((res) => {
          this.goodsList = res.data.data;
        });
    },
  },
  mounted() {
    // 历史搜索记录赋值
    this.historyArr = JSON.parse(localStorage.getItem("search"));

    this.getdata();
  },
};
</script>

<style scoped lang='scss'>
.top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
}
.titleBox {
  display: flex;
  justify-content: space-between;
}
.hotsearch1 {
  padding-top: 1.0834rem;
}
.hotsearch {
  margin: 10px 20px 20px;
  i {
    font-size: 0.3902rem;
    color: #b0352f;
    margin-right: 1vw;
  }
  .hotTitle {
    font-size: 0.3902rem;
    margin-bottom: 0.3659rem;
  }
  .keyword {
    display: flex;
    flex-flow: wrap;
  }
  .keywordText {
    color: #999;
    padding: 1vw;
    border: 1px solid #999;
    font-size: 0.3415rem;
    margin-right: 15px;
    margin-bottom: 15px;
  }
}

.icon {
  padding: 0 3vw;
}
</style>